<script setup>
import {computed} from "vue";

const props = defineProps({
  inputLabel: {
      type: String,
      required: true
  },
  placeHolder: {
    type: String,
    required: true
  },
  type: {
    type: String,
    required: true
  }
})

const inputClass = computed(() => [
  'rounded-sm', 'border', 'py-3', 'px-8', 'whitespace-nowrap', 'text-xs', 'font-normal', 'focus:outline-none', 'focus:ring-0',
  {
    'bg-gray-100 text-black border-gray-300 placeholder-gray-900/50': props.type === 'light',
    'bg-gray-700 text-white border-gray-500 placeholder-white/60': props.type === 'dark',
  }
]);
</script>

<template>
  <div class="flex flex-col text-start space-y-2">
    <label class="text-sm">
      <span>{{ inputLabel }}</span>
    </label>
    <input type="text" id="text" name="text" :placeholder="placeHolder" :class="inputClass">
    <slot></slot>
  </div>
</template>

<style scoped>

</style>